<!DOCTYPE html>
<html lang="zh-cn" >
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="author"
      content="awesome404"
    />
      
    <title>Vue2语法及指令 ｜ 鹊木笔记</title>
    
    
    
    <meta name="description" content="Mustache 语法 通过上几期文章，我们了解到想要将定义在 data 属性中的变量显示到网页中，通常需要用到 Mustache 语法，语法结构如下， {{ 变量 / 表达式 }} 如果 Vue 读取到这种格式，会将括号内的语句当作命令执行，在括号内的变量也是可以进行" />
      
    <meta
      name="keywords"
      content="Blog, 程序员, 前端"
    />
      <link
    rel="shortcut icon" href="https://awesome404.gitee.io/images/favicon.ico" />

    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://awesome404.gitee.io/css/normalize.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/zozo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
    />
    <link rel="stylesheet" type="text/css" media="screen" href="https://awesome404.gitee.io/css/highlight.css" />

    
    
  </head>
</html>


<body>
    <div class="main animate__animated animate__fadeInDown">
        
<div class="nav_container animated fadeInDown">
  <div class="site_nav" id="site_nav">
    <ul>
      
      <li>
        <a href="/">首页</a>
      </li>
      
      <li>
        <a href="/posts/">归档</a>
      </li>
      
      <li>
        <a href="/tags/">标签</a>
      </li>
      
      <li>
        <a href="/about/">关于</a>
      </li>
      
    </ul>
  </div>
  <div class="menu_icon">
    <a id="menu_icon">
      <i class="ri-settings-line"></i>
    </a>
  </div>
</div>

        <div class="header animated fadeInDown">
  <div class="site_title_container">
    <div class="site_title">
      <h1>
        <a href="https://awesome404.gitee.io">
          <span>鹊木笔记</span>
        </a>
      </h1>
    </div>
    <div class="description">
      <p class="sub_title">
        前端菜鸡的自我修养
      </p>
      <div class="my_socials">
         
        <a href="https://github.com/404Awesome" title="github" target="_blank"
          ><i class="ri-github-fill"></i
        ></a>
         
        <a
          href="https://awesome404.gitee.io/index.xml"
          type="application/rss+xml"
          title="rss"
          target="_blank"
          ><i class="ri-rss-fill"></i
        ></a>
      </div>
    </div>
  </div>
</div>

        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/vue2%E8%AF%AD%E6%B3%95%E5%8F%8A%E6%8C%87%E4%BB%A4/'>Vue2语法及指令</a></h2>
                        <span class="date">2020.04.08</span>
                    </div>
                    <div class="post_content markdown"><h1 id="mustache-语法">Mustache 语法</h1>
<p>通过上几期文章，我们了解到想要将定义在 data 属性中的变量显示到网页中，通常需要用到 Mustache 语法，语法结构如下，</p>
<blockquote>
<p>{{ 变量 / 表达式 }}</p>
</blockquote>
<p>如果 Vue 读取到这种格式，会将括号内的语句当作命令执行，在括号内的变量也是可以进行计算的，比如加减乘除，但是需要注意的是使用加号，若两边有一方是字符串，将会和 JS 语法差不多，进行字符串拼接，这是需要注意的，其实除了使用 Mustache 语法可以将变量输出到页面中，还可以使用 Vue 指令，但是有时不如 Mustache 语法好用</p>
<h1 id="vue-指令">Vue 指令</h1>
<blockquote>
<p>Vue 封装了一些功能，这些功能可以简化我们对 Dom 的操作</p>
</blockquote>
<h3 id="v-once">v-once</h3>
<p>这个指令会导致所在的 Dom 元素内的数据只会渲染一次，等加载完成后，再去修改数据，所对应的网页内容不会发生改变 ，也就是，所在的 Dom 元素内的数据不再是响应式，用法如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-once</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><h3 id="v-html">v-html</h3>
<p>若我们从服务器请求下来的数据本身是一个 html 代码的话，我们希望，直接让他展示到页面当中，此时， v-html 指令就能够满足我们的需求，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-html</span><span class="o">=</span><span class="s">&#34;url&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;div&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">url</span><span class="o">:</span> <span class="s2">&#34;&lt;a href=&#39;www.suyuan5.top&#39;&gt;SuYuan5&lt;/a&gt;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>使用 v-html 指令，它便会将变量 url 中的内容当做 html 代码渲染到 div 中，需要注意的是，这个指令会覆盖 div 中已有的内容</p>
<h3 id="v-text">v-text</h3>
<p>该指令的用途和 Mustache 语法相似，就是将变量的内容渲染到页面当中，渲染的过程中，只是将该变量的值当作一个普通字符串处理，不过该指令会和 v-html 指令一样，会将元素内已有的内容覆盖，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-text</span><span class="o">=</span><span class="s">&#34;content&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;&lt;h1&gt;Hello World&lt;/h1&gt;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><h3 id="v-pre">v-pre</h3>
<p>若我们想要在页面中显示 {{ 内容 }} 这样的内容，而不想让它被当做 Mustache 语法去解析的话，就可以用到 v-pre 指令，元素内的内容会原样渲染到页面当中</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-pre</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><h3 id="v-cloak">v-cloak</h3>
<p>有时会因为网络加载过慢，导致有些 Mustache 语法，还没有被解析，就展示到了页面当中，为了防止这种现象，可以使用 v-cloak，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="o">[</span><span class="nt">v-cloak</span><span class="o">]</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="k">display</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-cloak</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nx">setTimeout</span><span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello Vue&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">});</span>
</span></span><span class="line"><span class="cl"><span class="p">},</span> <span class="mi">2000</span><span class="p">);</span>
</span></span></code></pre></div><p>上面的代码依次为 CSS，HTML，JS 代码，同时我们使用了 setTimeout 模拟了一下网络加载慢的情况，然后宁愿该元素在网络加载慢时，不展示到页面当中，也不要将未解析完成的 mustache 语法，直接展示到页面当中，影响用户体验</p>
<h3 id="v-for">v-for</h3>
<p>这个指令一般用来遍历数组，也可以遍历对象，下面以数组为例，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;(item, index) in arr&#34;</span><span class="p">&gt;</span>{{item + &#39; &#39; + index}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;ul&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">arr</span><span class="o">:</span> <span class="p">[</span><span class="s2">&#34;content1&#34;</span><span class="p">,</span> <span class="s2">&#34;content2&#34;</span><span class="p">,</span> <span class="s2">&#34;content3&#34;</span><span class="p">,</span> <span class="s2">&#34;content4&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><blockquote>
<p>其中 item 是数组内的&quot;元素&quot;，而 index 是数组元素对应的&quot;索引&quot;，可以将它们当做变量在所在的作用域内使用</p>
</blockquote>
<p>如果频繁操作数组元素，删除替换等操作时，可以为元素绑定一个 key，绑定完成后，在进行操作数组时，会由于 diff 算法的原因，优化了程序的性能，每个 key 的值都应该是独一无二的，同时绑定了 key 也表示该元素不再进行复用，例如切换两个表单元素时，在上个表单文本框内输入的值，就不会保留到切换后的表单文本框内，一般可以为 key 属性绑定遍历元素或者其索引，这里用到了 v-bind 指令，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">li</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;(item, index) in arr&#34;</span> <span class="na">v-bind:key</span><span class="o">=</span><span class="s">&#34;index + item&#34;</span><span class="p">&gt;</span>{{item}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span></span></code></pre></div><blockquote>
<p>Key 的作用主要是为了高效的更新虚拟 DOM</p>
</blockquote>
<blockquote>
<p>注意的是，如果遍历的是数组，则可以按照顺序取到数组元素及索引，但是遍历对象，则可以按照顺序取到对象的属性值，属性名，索引</p>
</blockquote>
<h3 id="v-bind">v-bind</h3>
<p>v-bind 用于绑定一个或者多个属性值，或者向另一个组件传递 props 值( 组件 )， 这个指令可以绑定 Dom 元素的属性，如果我们不只是想让 Dom 元素的内容动态改变，也想让其属性也能动态改变，这个 v-bind 指令就可以做到，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">img</span> <span class="na">v-bind:src</span><span class="o">=</span><span class="s">&#34;img&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">a</span> <span class="na">v-bind:href</span><span class="o">=</span><span class="s">&#34;a&#34;</span><span class="p">&gt;</span> {{content}} <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;main&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">img</span><span class="o">:</span> <span class="s2">&#34;www.suyuan5.top/xxx.jpg&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">a</span><span class="o">:</span> <span class="s2">&#34;www.suyuan5.top/xxx.html&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>通过 v-bind 指令，我们为 img 标签的 src 属性和 a 标签的 href 属性绑定一个变量，这样一来，变量内的值就会当作绑定时属性的属性值，一般来说，该变量内存放的值，大多都是从服务器请求下来的，这样就可以动态的改变某张图片，或则某个链接的指向，Vue 还提供了 v-bind 的语法糖，可以在属性前面加上 : ，等同于在属性前面加上了 v-bind，往后的代码中，我们直接使用语法糖的形式来操作</p>
<h4 id="当-v-bind-遇上-class">当 v-bind 遇上 class</h4>
<p>可以使用 v-bind 动态的加载 class 类，分为对象形式和数组形式，常用对象形式，如下</p>
<blockquote>
<p>对象形式</p>
</blockquote>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;{&#39;class1&#39;: isClass1, &#39;class2&#39;: isClass2}&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">isClass1</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">isClass2</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>对象形式的结构为：{ 类名：布尔值 } 的形式，根据布尔值，来决定前面的类名是否添加到 class 类当中，true 为添加，false 为不添加，如果 class 属性中的对象内的值比较多，还可以在 methods 或者 computed 中定义，然后将结果返回 return，这两个属性的区别在于，computed 不用加上 ( ) 括号调用，而 methods 则需要，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;classes / getClass()&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">isClass1</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">isClass2</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getClass</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">return</span> <span class="p">{</span> <span class="nx">class1</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">isClass1</span><span class="p">,</span> <span class="nx">class2</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">isClass2</span> <span class="p">};</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">classes</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">return</span> <span class="p">{</span> <span class="nx">class1</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">isClass1</span><span class="p">,</span> <span class="nx">class2</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">isClass2</span> <span class="p">};</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><blockquote>
<p>数组形式</p>
</blockquote>
<p>一般来说并不如对象形式常用，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;[value1, value2]&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">value1</span><span class="o">:</span> <span class="s2">&#34;class1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">value2</span><span class="o">:</span> <span class="s2">&#34;class2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>显然使用数组形式起来不如对象灵活，当然，如果 class 属性中的数组内的值比较多，也可以使用 methods 属性或者 computed 属性返回</p>
<p>使用 v-bind 绑定的 class 属性在对象和数组形式下都可以和普通的 class 共存，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;class&#34;</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;{&#39;class1&#39;: isClass1}&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;class&#34;</span> <span class="na">:class</span><span class="o">=</span><span class="s">&#34;[class1]&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><blockquote>
<p>需要注意的是，一般来说，类名后面的布尔值是不会写死的，可以使用条件表达式返回一个布尔值，动态加载 class 类</p>
</blockquote>
<h4 id="当-v-bind-遇上-style">当 v-bind 遇上 style</h4>
<p>v-bind 不仅可以动态绑定 class ，还可以动态绑定 style 样式，也分为对象形式和数组形式</p>
<blockquote>
<p>对象形式</p>
</blockquote>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:style</span><span class="o">=</span><span class="s">&#34;{color: getColor, fontSize: getFS + &#39;px&#39;}&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getColor</span><span class="o">:</span> <span class="s2">&#34;orangered&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getFS</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>HTML 代码中对象的形式为 {属性名：属性值 } 的形式，其中后面的 fontSize 是 css 样式中 font-size 的驼峰写法，虽然在对象中直接书写 font-size 为属性名，也可以识别，但是还是推荐使用驼峰写法，当对象内的值过多的时候，也可以使用 methods 或者 computed 返回值，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:Style</span><span class="o">=</span><span class="s">&#34;getStyle() / styles&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getColor</span><span class="o">:</span> <span class="s2">&#34;orangered&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getFontS</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">getStyle</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">return</span> <span class="p">{</span> <span class="nx">color</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getColor</span><span class="p">,</span> <span class="nx">fontSize</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFontS</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span> <span class="p">};</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">styles</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="k">return</span> <span class="p">{</span> <span class="nx">color</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getColor</span><span class="p">,</span> <span class="nx">fontSize</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFontS</span> <span class="o">+</span> <span class="s2">&#34;px&#34;</span> <span class="p">};</span>
</span></span><span class="line"><span class="cl">    <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><blockquote>
<p>数组形式</p>
</blockquote>
<p>使用数组形式的情况也不是特别多，但是还是要看一下，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">:style</span><span class="o">=</span><span class="s">&#34;[value1, value2]&#34;</span><span class="p">&gt;</span>{{content}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">content</span><span class="o">:</span> <span class="s2">&#34;Hello World&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">value1</span><span class="o">:</span> <span class="p">{</span> <span class="nx">color</span><span class="o">:</span> <span class="s2">&#34;orange&#34;</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="nx">value2</span><span class="o">:</span> <span class="p">{</span> <span class="nx">fontSize</span><span class="o">:</span> <span class="s2">&#34;100px&#34;</span> <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>当数组内的值多时，也可以使用 methods 属性和 computed 属性等返回</p>
<h3 id="v-on">v-on</h3>
<h4 id="基本使用">基本使用</h4>
<p>如果我们需要监听一些事件，这时候就可以用到 v-on 指令了，当然这个指令也是有语法糖形式的，便于开发，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;function / JsCode&#34;</span><span class="p">&gt;</span>OK<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>除了 click 点击事件还有 keyup 等事件，后面引号中即可以是方法又可以是 Js 代码，调用方法是有区别的，如下</p>
<ol>
<li>如果方法不传入参数的话，可以省略方法后面的括号，直接使用方法名</li>
<li>Vue 默认会将事件对象传入第一个形参当中</li>
<li>若想传入参数，并且还需要事件对象的话，可以使用 $event 指定事件对象，如下</li>
</ol>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="o">=</span><span class="s">&#34;show(&#39;Vue&#39;, $event)&#34;</span><span class="p">&gt;</span>OK<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="mi">3</span><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;button&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nx">show</span> <span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">event</span><span class="p">){</span>
</span></span><span class="line"><span class="cl">            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">event</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">            <span class="c1">// pintf  --&gt;  Vue eventObject
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>        <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>然后 Vue 还提供了语法糖的形式，如下</p>
<blockquote>
<p>语法糖：简写形式</p>
<p>v-on:click == @click</p>
</blockquote>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">blur</span><span class="o">=</span><span class="s">&#34;show()&#34;</span><span class="p">&gt;</span>blur<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="o">=</span><span class="s">&#34;show()&#34;</span><span class="p">&gt;</span>click<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>除了以上几种事件之外，还有许多，这里就不多说了</p>
<h4 id="v-on-事件修饰符">v-on 事件修饰符</h4>
<p>在某些情况下，我们会拿到事件对象，然后做一些事件处理，比如取消默认事件等，所以 Vue 帮我们定义了一些常用的方法，就是 v-on 的修饰符，如下</p>
<ol>
<li>
<p>.stop</p>
<blockquote>
<p>调用 event.stopPropagation( )</p>
<p>阻止冒泡事件</p>
</blockquote>
</li>
<li>
<p>.prevent</p>
<blockquote>
<p>调用 event.preventDefault( )</p>
<p>取消默认事件</p>
</blockquote>
</li>
<li>
<p>.capture</p>
<blockquote>
<p>添加事件侦听器时使用 capture 模式</p>
</blockquote>
</li>
<li>
<p>.self</p>
<blockquote>
<p>只当事件是从侦听器绑定的元素本身触发时才触发回调</p>
</blockquote>
</li>
<li>
<p>.{keyCode | keyAlias}</p>
<blockquote>
<p>只当事件是从特定键触发时才触发回调</p>
<p>键别名 .enter</p>
</blockquote>
</li>
<li>
<p>.native</p>
<blockquote>
<p>监听组件根元素的原生事件</p>
<p>默认直接对组件添加事件是无效的，需要加上该修饰符，才可以</p>
</blockquote>
</li>
<li>
<p>.once</p>
<blockquote>
<p>只触发一次回调</p>
</blockquote>
</li>
<li>
<p>.left</p>
<blockquote>
<p>(2.2.0) 只当点击鼠标左键时触发</p>
</blockquote>
</li>
<li>
<p>.right</p>
<blockquote>
<p>(2.2.0) 只当点击鼠标右键时触发</p>
</blockquote>
</li>
<li>
<p>.middle</p>
<blockquote>
<p>(2.2.0) 只当点击鼠标中键时触发</p>
</blockquote>
</li>
<li>
<p>.passive</p>
<blockquote>
<p>(2.3.0) 以 { passive: true } 模式添加侦听器</p>
</blockquote>
</li>
</ol>
<p>用法如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="na">v-on:click</span><span class="err">.</span><span class="na">stop</span><span class="o">=</span><span class="s">&#34;show()&#34;</span><span class="p">&gt;</span>OK<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">button</span> <span class="err">@</span><span class="na">click</span><span class="err">.</span><span class="na">prevent</span><span class="o">=</span><span class="s">&#34;show()&#34;</span><span class="p">&gt;</span>OK<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>在绑定事件后面添加上需要的修饰符，就能够帮我们完成一些事件处理，提升效率</p>
<p>有时我们还需要监听键盘事件 (keyup，keydown，keypress)，根据按下的键，来处理某些事情，Vue 也帮我们定义了一些常用的按键修饰符，如下</p>
<ol>
<li>.enter</li>
<li>.tab</li>
<li>.delete 捕获 &ldquo;删除&rdquo; 和&quot; 退格&quot; 键</li>
<li>.esc</li>
<li>.space</li>
<li>.up</li>
<li>.down</li>
<li>.left</li>
<li>.right</li>
</ol>
<h3 id="v-if--v-else--v-else-if">v-if / v-else / v-else-if</h3>
<p>这三个和 Js 中的条件语句 if，else，else if 类似，根据表达式的值决定该 DOM 元素是否进行渲染或者进行销毁，需要注意的是这个指令会对 DOM 元素进行渲染和销毁操作，所以频繁调用会损耗性能</p>
<h4 id="v-if">v-if</h4>
<p>原理是 v-if 后面的条件为 false 时，对应的 DOM 元素以及子元素不会被渲染，而为 true 时，则进行渲染显示，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;false&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello World<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>上面的案例就不会被渲染到页面当中，只有后面的条件表达式为 true 时，才会进行渲染，上面为了方便没有使用条件 ，直接使用的布尔值，与 v-if 对应的就是 v-else，如下</p>
<h4 id="v-else">v-else</h4>
<p>如果 v-if 为 false 时，v-if 所在的 DOM 元素不会渲染到页面当中，但是 v-else 所在的 DOM 元素则会进行渲染到页面，也就是如果 v-if 为 true，渲染 v-if 所在的 DOM 元素，不会渲染 v-else 所在的 DOM 元素，如果为 false，则反之，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;false&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello v-if<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">v-else</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello v-else<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><h4 id="v-else-if">v-else-if</h4>
<p>进行多个条件匹配，为 true 的显示，其余的不显示，后面跟表达式，返回的应该是一个布尔值，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-if</span><span class="o">=</span><span class="s">&#34;score&gt;=90&#34;</span><span class="p">&gt;</span>Very Good<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&#34;score&gt;=80&#34;</span><span class="p">&gt;</span>Good<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-else-if</span><span class="o">=</span><span class="s">&#34;score&gt;=60&#34;</span><span class="p">&gt;</span>Pass<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">p</span> <span class="na">v-else</span><span class="p">&gt;</span>failed<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span></code></pre></div><h3 id="v-show">v-show</h3>
<p>v-show 的用法和 v-if 非常类似，也用于决定一个元素是否会被加载到页面当中，v-show 后面值是一个表达式，会返回一个布尔值，如果为 true 就显示，为 false 就不显示，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span> <span class="na">v-show</span><span class="o">=</span><span class="s">&#34;true&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Hello World<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><p>但是 v-show 和 v-if 是有区别的</p>
<ol>
<li>v-if 当条件为 false 时，压根不会有对应的元素在 DOM 中</li>
<li>v-show 当条件为 false 时，仅仅是将元素的 display 属性设置为 none 而已</li>
</ol>
<p>开发中如何选择</p>
<ol>
<li>当需要在显示与隐藏之间切换很频繁时，使用 v-show</li>
<li>当只切换一次时，使用 v-if</li>
</ol>
<h3 id="v-model">v-model</h3>
<p>表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单，Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定，例子如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;model&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;message&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{message}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;.model&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">message</span><span class="o">:</span> <span class="s2">&#34; &#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><ol>
<li>当我们在表单文本框内输入文本时</li>
<li>因为该表单中使用了 v-model 指令绑定了 message 变量，所以输入的内容会实时的传递给 message，因此 message 会发生变化</li>
<li>当 message 内容发生改变时，绑定的表单元素内的值（value），也会发生改变，所以叫做双向绑定</li>
</ol>
<p>当然也可以将 v-model 指令用于 textarea 文本域</p>
<h4 id="v-model-原理">v-model 原理</h4>
<p>v-model 其实就是一个语法糖，它的背后实质上是包含两个操作</p>
<ol>
<li>v-bind 绑定一个 value 值</li>
<li>v-on 指令给当前元素绑定 input 事件</li>
</ol>
<h4 id="v-model-遇上-radio">v-model 遇上 radio</h4>
<p>如果想要实现单选的话，无需添加 name 属性，直接使用 v-model 指令，值是一个变量，这个变量将存储着单选的结果</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;male&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;male&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;male&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;sex&#34;</span> <span class="p">/&gt;</span>男
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;female&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;female&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;female&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;sex&#34;</span> <span class="p">/&gt;</span>女
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{sex}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;male&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">sex</span><span class="o">:</span> <span class="s2">&#34; &#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>此时选择其中一个单选按钮，那么该按钮的值就会被输出到 h1 标签中，想要有默认值的话，可以为 sex 变量赋上一个默认值</p>
<h4 id="v-model-遇上-checkbox">v-model 遇上 checkbox</h4>
<p>想使用复选框，也无需定义 name 属性，我们定义了一个变量 ball 数组类型的，用来存储选中的选项，然后将选的结果输出到 h1 标签中</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;football&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;ball&#34;</span> <span class="p">/&gt;</span>football
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;basketball&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;ball&#34;</span> <span class="p">/&gt;</span>basketball
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;volleyball&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;ball&#34;</span> <span class="p">/&gt;</span>volleyball
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;badminton&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;ball&#34;</span> <span class="p">/&gt;</span>badminton
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{arr}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;main&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">ball</span><span class="o">:</span> <span class="p">[],</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>上面是一个多个复选框的例子，下面还有一个单个复选框的应用</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;agree&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;agree&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;bool&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>agree or not<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;button&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;next&#34;</span> <span class="na">:disabled</span><span class="o">=</span><span class="s">&#34;!bool&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>{{bool}}<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;main&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">bool</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><h4 id="当-v-model-遇上-select">当 v-model 遇上 select</h4>
<p>和 checkbox 一样，select 也分为单选和多选</p>
<p>单选：只能选定一个值</p>
<ol>
<li>v-model 绑定的是一个值</li>
<li>当我们选中 option 中的一个选项时，会将它对应的 value 赋值到 v-model 绑定的变量当中</li>
</ol>
<p>多选：可以选中多个值</p>
<ol>
<li>v-model 绑定的是一个数组</li>
<li>当选着多个值时，就会将选中的 option 对应的 value 添加 v-model 绑定的数组变量中</li>
</ol>
<p>不管是单选还是多选，v-model 指令绑定的是 select 标签，而不是 option 标签，如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">select</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;fruit&#34;</span> <span class="na">v-model</span><span class="o">=</span><span class="s">&#34;fruit&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;apple&#34;</span><span class="p">&gt;</span>apple<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;banana&#34;</span><span class="p">&gt;</span>banana<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;pear&#34;</span><span class="p">&gt;</span>pear<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;orange&#34;</span><span class="p">&gt;</span>orange<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;select&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">fruit</span><span class="o">:</span> <span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="c1">// default value
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>上面就是 select 单选，v-model 会将选中选项的值赋给 fruit 变量 ，也可以根据变量 fruit 的值，为 select 下拉列表赋一个默认值，而多选，只是为变量 fruit 赋了一个数组字面量，然后给 select 标签添加了一个 multiple 属性，无属性值，注意多选时，需要按住 ctrl 进行多选</p>
<h4 id="v-model-修饰符">v-model 修饰符</h4>
<p>修饰符有如下几种，作用和 v-on 指令的修饰符差不多，将一些常用功能利用简洁的写法实现，如下</p>
<ol>
<li>
<p>lazy 修饰符</p>
<blockquote>
<p>默认情况下，v-model 默认是在 input 事件中同步输入框的数据的</p>
<p>频繁的同步会浪费性能，若我们不想让他实时的刷新数据，可以在 v-model 后面加上 .lazy，就可以实现懒加载，等表单元素失去焦点或者按下回车，才会去同步数据</p>
</blockquote>
</li>
<li>
<p>number 修饰符</p>
<blockquote>
<p>表单元素的类型为 Number 时，只能输入数字，虽然是输入数字，但是最后得到的仍是字符串格式的数字，使用 .number 修饰符，可以得到 number 类型的数据</p>
</blockquote>
</li>
<li>
<p>trim 修饰符</p>
<blockquote>
<p>这个修饰符可以去除输入内容两侧的空白，使用方法同上</p>
</blockquote>
</li>
</ol>
<h3 id="值绑定">值绑定</h3>
<p>上述使用的表单元素，无论是单选按钮，还是复选框，其中的值都是写死的，而值绑定的概念就是动态的去绑定值，我们会用到 v-for 指令和 v-bind 指令，例子如下</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">label</span> <span class="na">v-for</span><span class="o">=</span><span class="s">&#34;item in fruit&#34;</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;item&#34;</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;checkbox&#34;</span> <span class="na">v-bind:value</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="na">:id</span><span class="o">=</span><span class="s">&#34;item&#34;</span> <span class="p">/&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span> {{item}} <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">temp</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Vue</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">el</span><span class="o">:</span> <span class="s2">&#34;main&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">data</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">fruit</span><span class="o">:</span> <span class="p">[</span><span class="s2">&#34;apple&#34;</span><span class="p">,</span> <span class="s2">&#34;banana&#34;</span><span class="p">,</span> <span class="s2">&#34;pear&#34;</span><span class="p">,</span> <span class="s2">&#34;orange&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><blockquote>
<p>经过上述操作，我们就完成了值绑定，根据数组内元素的个数，动态的生成对应的表单</p>
</blockquote>
</div>
                    <div class="post_footer">
                        
                        
                        <div id="link">
                            <p>本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议 。转载请注明出处！</p>
                            <p><span id="link_href"></span><i class="ri-file-copy-2-line link_btn"></i></p>
                        </div>
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-price-tag-2-line"></i>
                                    
                                    <a href="https://awesome404.gitee.io/tags/vue2/">Vue2</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    
<style>
  #hitokoto {
    overflow: hidden;
    margin: 0 auto;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    color: #424242;
  }

  .footer {
    padding: 30px 0px;
  }
</style>

<footer class="footer">
  <p id="hitokoto">:D 获取中...</p>
</footer>

<script>
  fetch("https://v1.hitokoto.cn")
    .then((response) => response.json())
    .then((data) => {
      const hitokoto = document.getElementById("hitokoto");
      hitokoto.href = "https://hitokoto.cn/?uuid=" + data.uuid;
      hitokoto.innerText = data.hitokoto;
    })
    .catch((err) => err);
</script>

    <script src="https://awesome404.gitee.io/js/jquery-3.5.1.min.js"></script>
<link href="https://awesome404.gitee.io/css/fancybox.min.css" rel="stylesheet">
<script src="https://awesome404.gitee.io/js/fancybox.min.js"></script>
<script src="https://awesome404.gitee.io/js/zozo.js"></script>




</body>


<script>
    (function (){
        
        function handleIcon (remove, target){
            this.classList.remove(remove);
            this.classList.add(target);
        }

        let hrefEl = document.getElementById("link_href");
        let copyBtn = document.getElementsByClassName("link_btn")[0];
        if (hrefEl){
            hrefEl.innerText = `文章链接: ${location.href}`;
            
            copyBtn.onclick = (event) => {
                
                navigator.clipboard.writeText(`文章转载自: ${location.href}`)
                
                handleIcon.call(event.target, "ri-file-copy-2-line", "ri-check-line");
                let timer = setTimeout(() => {
                    handleIcon.call(event.target, "ri-check-line", "ri-file-copy-2-line");
                    clearTimeout(timer)
                }, 1000)
            }
        }
    })();
</script>
</html>